import React from 'react';
import {Row, Col, Icon} from 'antd';
import ModifyPrice from './modifyPrice';
import ModifyPublicPrice from './modifyPublicPrice';
import {sessionManager} from '../../utils/sessionStorage';
import {UUID} from '../../utils/tranStartType';
import {injectIntl} from 'react-intl';
import axios from 'axios';
import AuthButton from '../../components/auth/authButton'


class priceInfo extends React.Component {
    constructor() {
        super();
        this.state = {
            visible: false,
            visible4public:false,
            stubName: '',
            publicPrices: [],
            privatePrices: [],
            currentBind:{}
        }
    }

    componentDidMount() {
        this.getStubGroupPrice();
    }

    priceFormat = (data) => {
        //data为数组 处理格式
        let len = data.length;
        return data.forEach((item, index, arr) => {
            if (index < len - 1) {
                item.endTime = arr[index + 1][0].substring(0, 2) + ':' + arr[index + 1][0].substring(2, 4);
            } else {
                item.endTime = '23:59';
            }
            //给key
            item.uuidKeys = UUID();
            //开始时间
            item.startTime = item[0].substring(0, 2) + ':' + item[0].substring(2, 4);
            //电价
            item.electricityPrice = item[1];
            //服务费
            item.servicePrice = item[2];
            //计费区间
            item.range=item[3];
            return item
        });
    }
    getStubGroupPrice = () => {
        let selectStuGroup = sessionManager.get('selectStuGroup');
        console.log('电站详情点击行信息', selectStuGroup);
        this.setState({
            stubName: selectStuGroup.name
        });
        axios.post('/api/stubGroup/price/qry', {
            stubGroupId: selectStuGroup.id,
        }).then(res => {
            // console.log('验证通过后调用接口',res.data);
            //type==1 公共价格
            if (res) {
                let publicPrice = res.data.filter((item) => {
                    return item.type == 1
                })[0].feeInfo;
                this.priceFormat(publicPrice);
                if (!publicPrice) {
                    publicPrice = []
                }
                this.setState({
                    publicPrices: publicPrice
                });
                //type==2 企业价格
                let privatePrice = res.data.filter((item) => {
                    return item.type == 2
                })[0].feeInfo;
                this.priceFormat(privatePrice);
                if (!privatePrice) {
                    privatePrice = []
                }
                this.setState({
                    privatePrices: privatePrice
                },()=>{console.log('数据转换', this.state.privatePrices)});
            }
        })
    };
    modifyData = () => {
        this.setState({
            visible: true
        });
        let stuGroupID = sessionManager.get('selectStuGroup').id;
        axios.get('/api/stubGroup/feeTemplate/current',{params:{
            stubGroupId:stuGroupID
        }}).then(res=>{
            if(res&&res.data){
                this.setState({
                    currentBind:res.data
                })
            }
        })
    };

    handleCancel=()=>{
        this.setState({
            visible: false,
            visible4public: false
        })
    }

    openPublic = () => {
        this.setState({
            visible4public: true
        })
    };

    transRange=(data)=>{
        if(data==1){
            return '峰时'
        }
        if(data==2){
            return '尖时'
        }
        if(data==3){
            return '谷时'
        }
        if(data==4){
            return '平时'
        }
        return ''
    }

    render() {
        const common = this.props.intl.messages.common;
        const selectStuGroup = sessionManager.get('selectStuGroup');
        console.log(selectStuGroup.isOwned)
        return (
            <AuthButton>
            <div className="gutter-example price">
                <Row gutter={40} style={{background:'#fafafa'}}>
                    <Col className="gutter-row" span={6}>
                        <div className="gutter-box">{common.powerStationName}</div>
                    </Col>
                    <Col className="gutter-row" span={9}>
                        <div className="gutter-box">{common.publicElectricityPrice}</div>
                    </Col>
                    <Col className="gutter-row" span={9}>
                        <div className="gutter-box">{common.companyElectricityPrice}</div>
                    </Col>
                </Row>
                <Row gutter={40}>
                    <Col className="gutter-row" span={6}>
                        <div className="gutter-content">{this.state.stubName}</div>
                    </Col>
                    <Col className="gutter-row" span={9}>
                        <div className="gutter-content" style={{textAlign:'left'}}>
                            <Col span={17} ref='test'>
                                {this.state.publicPrices.map((item) => <div
                                    key={item[0]}>{item.startTime}~{item.endTime}&nbsp;&nbsp;{common.serviceChargeUnit}:{item.servicePrice.toFixed(4)}&nbsp;&nbsp;{common.energyChargeUnit}:{item.electricityPrice.toFixed(4)}&nbsp;&nbsp;{this.transRange(item.range)}</div>)}
                            </Col>
                            {selectStuGroup.isOwned==0&&<Col span={7} onClick={this.openPublic} data-auth={'103003'}><Icon type="edit"
                                                                          style={{fontSize: 24, color: '#08c'}}/></Col>}
                        </div>
                    </Col>
                    <Col className="gutter-row" span={9}>
                        <div className="gutter-content" style={{textAlign:'left'}}>
                            <Row gutter={16}>
                                <Col span={17} ref='test'>
                                    {this.state.privatePrices.length > 0 ?
                                        this.state.privatePrices.map((item) => <div
                                            key={item[0]}>{item.startTime}~{item.endTime}&nbsp;&nbsp;{common.serviceChargeUnit}:{item.servicePrice.toFixed(4)}&nbsp;&nbsp;{common.energyChargeUnit}:{item.electricityPrice.toFixed(4)}&nbsp;&nbsp;{this.transRange(item.range)}</div>)
                                        :
                                        <div>暂无设定价格</div>}
                                </Col>
                                <Col span={7} onClick={this.modifyData}><Icon type="edit" style={{
                                    fontSize: 24,
                                    color: '#08c'
                                }}/></Col>
                            </Row>
                        </div>
                    </Col>
                </Row>
                <ModifyPrice visible={this.state.visible} getStubGroupPrice={this.getStubGroupPrice}
                             privatePrices={this.state.privatePrices} handleCancel={this.handleCancel}/>
                <ModifyPublicPrice visible={this.state.visible4public} getStubGroupPrice={this.getStubGroupPrice}
                             privatePrices={this.state.publicPrices} handleCancel={this.handleCancel}/>
            </div>
            </AuthButton>
        )
    }
}

export default injectIntl(priceInfo);